<template>
    <el-row>
      <el-col :span="24">
          <el-table :data="modulesList">
            <el-table-column label="ID" prop="id"></el-table-column>
            <el-table-column label="模块" prop="name"></el-table-column>
            <el-table-column label="模块名" prop="title"></el-table-column>
            <el-table-column label="创建时间" prop="created"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button plain type="primary" size="small" @click="to_detail(scope.row)">详情</el-button>
                    <el-button plain type="danger" size="small">删除</el-button>
                </template>
            </el-table-column>
          </el-table>
      </el-col>
      <el-col :span="6">
          <el-pagination :total="page.total" :current-page="page.current_page" :page-size="page.page_size" @current-change="pageChange" layout="prev,pager,next"></el-pagination>
      </el-col>

    </el-row>
</template>
<style>

</style>
<script>
import Vue from 'vue';
import ElementUI from 'element-ui';
import axios from 'axios';
import { mapMutations } from 'vuex'
import 'element-ui/lib/theme-chalk/index.css';
import '~/assets/iconfont/iconfont.css';

Vue.use(ElementUI);
export default {
    async asyncData(){
        let modulesList = await axios.get('http://localhost:3031/modulesList');
        return {
            modulesList:modulesList.data.modulesList,
            page:modulesList.data.page
            };
       
    },
    data(){
        return {
            
        }
    },
    methods:{
        pageChange(val){
            let _this = this;
            axios.get('http://localhost:3031/modulesList?page='+val).then(response=>{
                if(response.data.err == 0){
                    _this.util.mainMessage('success',response.data.content,_this);
                    _this.modulesList = response.data.modulesList;
                    _this.page = response.data.page
                }else{
                    _this.util.mainMessage('error',response.data.content,_this);
                }
                
            }).catch(error=>{
                _this.util.mainMessage('error','未知错误：'+error,_this);
            })
        },
        to_detail(row){
            this.$store.commit('modules/addBreadcrumbList',{
                title:row.title,
                to:row.to_detail
            });
            this.$router.push({path:row.to_detail});
        }
    }
}
</script>


